import { lazy } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
//三级路由
const Echarts = lazy(() => import("../pages/Data/Echarts/Index"));
const Table = lazy(() => import("../pages/List/Table/Index"));
//二级路由
const Index = lazy(() => import("../pages/Index/Index"));
const Data = lazy(() => import("../pages/Data/Data"));
const List = lazy(() => import("../pages/List/List"));
export const homeRouter = [
  {
    path: "/MyLayout/Index",
    element: <Index></Index>,
    title: "首页",
  },
  {
    path: "/MyLayout/Data/",
    element: <Data></Data>,
    title: "数据可视化",
    children: [
      {
        path: "Echarts",
        element: <Echarts></Echarts>,
        title: "分析页",
      },
    ],
  },
  {
    path: "/MyLayout/List/",
    element: <List></List>,
    title: "列表页",
    children: [
      {
        path: "Table",
        element: <Table></Table>,
        title: "查询表格",
      },
    ],
  },
];
const formRouter = (routers) => {
  return routers.map((router) => ({
    ...router,
    children: router.children ? formRouter(router.children) : undefined,
  }));
};
//一级路由
const MyLayout = lazy(() => import("../pages/MyLayout/MyLayout"));
const Login = lazy(() => import("../pages/Login/Login"));
const Error = lazy(() => import("../pages/404/Error"));
//一级路由配置
const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <Navigate to="/MyLayout/Index"></Navigate>,
    },
    {
      path: "/MyLayout",
      element: <MyLayout></MyLayout>,
      children: formRouter(homeRouter),
    },
    {
      path: "/Login",
      element: <Login></Login>,
    },
    {
      path: "*",
      element: <Error></Error>,
    },
  ],
  {
    basename: "/szl",
  }
);
export default router;
